<template>
  <div class="main">
    <el-tabs type="border-card">
        <el-tab-pane v-if="flag==1" label="新增单元">
            
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :inline="true"    label-width="100px" class="demo-ruleForm">
                    <el-form-item label="小区名称" prop="communityname"  >
                        <el-input v-model="ruleForm.communityname" minlength="500" ></el-input>
                    </el-form-item>
                    <el-form-item label="单元名称" prop="unitname">
                        <el-input v-model="ruleForm.unitname"></el-input>
                    </el-form-item>
                    <el-form-item label="栋数" prop="unitnum">
                        <el-input v-model="ruleForm.unitnum"></el-input>
                    </el-form-item>
                    <el-form-item label="状态选择" prop="unitstatus">
                        <el-select v-model="ruleForm.unitstatus" placeholder="请选择状态" style="width: 500px;">
                        <el-option label="已建成" :value="1"></el-option>
                        <el-option label="未建成" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    </el-form>
                    <el-form :model="storepage"   label-width="100px" class="demo-ruleForm2">
                        <el-form-item class="formitem" label="咨询问候" >
                            <vue-ueditor-wrap v-model="storepage.unitcontext" :config="editorConfig" editor-id="editor-demo-01"  ></vue-ueditor-wrap>
                        </el-form-item>
                    </el-form>


                            <div class="button-box">
                                <el-button type="primary" size="medium" class="button1" @click="tobefore" >
                                <span class="span1" >
                                    <svg t="1722249586420" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2302"  height="20"><path d="M947.4 864C893.2 697.7 736.2 578.9 551 575.5c-23.1-0.4-44.9 0.1-65.6 1.5v164.3c0.1 0.5 0.2 1 0.2 1.5 0 4-3.3 7.3-7.3 7.3-2.7 0-5-1.4-6.2-3.5v0.7L68.8 465.4h2.1c-4 0-7.3-3.3-7.3-7.3 0-2.9 1.7-5.4 4.1-6.6L472 169v0.7c1.3-2.1 3.6-3.5 6.2-3.5 4 0 7.3 3.3 7.3 7.3 0 0.5-0.1 1-0.2 1.5v159.4c18.5-0.9 37.9-1.2 58.3-0.8 230.1 3.9 416.7 196.9 416.7 427.1 0.1 35.5-4.5 70.2-12.9 103.3z m-462-704.4v0.2h-0.4l0.4-0.2z m0 596.9l-0.3-0.2h0.3v0.2z" fill="#ffffff" p-id="2303"></path></svg>
                                    <span>返回</span>
                                </span>
                            </el-button>
                            <el-button type="primary" size="medium" class="" @click="submitForm('ruleForm')">
                                <span class="span1">
                                    <svg t="1722251178632" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3414"  height="20"><path d="M925.248 356.928l-258.176-258.176a64 64 0 0 0-45.248-18.752H144a64 64 0 0 0-64 64v736a64 64 0 0 0 64 64h736a64 64 0 0 0 64-64V402.176a64 64 0 0 0-18.752-45.248zM288 144h192V256H288V144z m448 736H288V736h448v144z m144 0H800V704a32 32 0 0 0-32-32H256a32 32 0 0 0-32 32v176H144v-736H224V288a32 32 0 0 0 32 32h256a32 32 0 0 0 32-32V144h77.824l258.176 258.176V880z" p-id="3415" fill="#ffffff"></path></svg>
                                    <span>保存</span>
                                </span>
                            </el-button>
                            </div>

            
        </el-tab-pane>
        <el-tab-pane v-if="flag==2" label="单元详细">
            <div class="detail">
                <div class="list">
                    <div class="list-title"><div style="color: red;margin-right: 5px;">*</div>小区名称：</div><div class="list-content">{{ ruleForm.communityname }}</div>
                </div>
                <div class="list">
                    <div class="list-title"><div style="color: red;margin-right: 5px;">*</div>单元名称：</div><div class="list-content">{{ ruleForm.unitname }}</div>
                </div>
                <div class="list">
                   <div class="list-title"><div style="color: red;margin-right: 5px;">*</div>栋数：</div><div class="list-content">{{ ruleForm.unitnum }}</div>
                </div>
                <div class="list">
                    <div class="list-title"><div style="color: red;margin-right: 5px;">*</div>状态：</div><div class="list-content">{{ ruleForm.unitstatus==1?"已建成":"未建成" }}</div>
                </div>
                <div class="list">
                    <div class="list-title">咨询问候：</div><div class="list-content" v-html="ruleForm.unitcontext"></div>
                </div>
            </div>
            <div class="button-box">
                                <el-button type="primary" size="medium" class="button1" @click="tobefore" >
                                <span class="span1" >
                                    <svg t="1722249586420" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2302"  height="20"><path d="M947.4 864C893.2 697.7 736.2 578.9 551 575.5c-23.1-0.4-44.9 0.1-65.6 1.5v164.3c0.1 0.5 0.2 1 0.2 1.5 0 4-3.3 7.3-7.3 7.3-2.7 0-5-1.4-6.2-3.5v0.7L68.8 465.4h2.1c-4 0-7.3-3.3-7.3-7.3 0-2.9 1.7-5.4 4.1-6.6L472 169v0.7c1.3-2.1 3.6-3.5 6.2-3.5 4 0 7.3 3.3 7.3 7.3 0 0.5-0.1 1-0.2 1.5v159.4c18.5-0.9 37.9-1.2 58.3-0.8 230.1 3.9 416.7 196.9 416.7 427.1 0.1 35.5-4.5 70.2-12.9 103.3z m-462-704.4v0.2h-0.4l0.4-0.2z m0 596.9l-0.3-0.2h0.3v0.2z" fill="#ffffff" p-id="2303"></path></svg>
                                    <span>返回</span>
                                </span>
                            </el-button>
                            <el-button type="primary" size="medium" class="" @click="towrite">
                                <span class="span1">
                                    <svg t="1722251178632" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3414"  height="20"><path d="M925.248 356.928l-258.176-258.176a64 64 0 0 0-45.248-18.752H144a64 64 0 0 0-64 64v736a64 64 0 0 0 64 64h736a64 64 0 0 0 64-64V402.176a64 64 0 0 0-18.752-45.248zM288 144h192V256H288V144z m448 736H288V736h448v144z m144 0H800V704a32 32 0 0 0-32-32H256a32 32 0 0 0-32 32v176H144v-736H224V288a32 32 0 0 0 32 32h256a32 32 0 0 0 32-32V144h77.824l258.176 258.176V880z" p-id="3415" fill="#ffffff"></path></svg>
                                    <span>编辑</span>
                                </span>
                            </el-button>
                            </div>

        </el-tab-pane>
    </el-tabs>

    
    
  </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap';
export default {
    components: {
  VueUeditorWrap
},
    data(){
        return{
            msg: '',
            editorConfig: {
            // 访问 UEditor 静态资源的根路径，可参考 https://hc199421.gitee.io/vue-ueditor-wrap/#/faq
            UEDITOR_HOME_URL: "/UEditor/",
            // 服务端接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
            serverUrl: "//ueditor.zhenghaochuan.com/cos",
            initialFrameHeight: 300,
            },
            flag:this.$route.query.flag,
            content: '',
            ruleForm: {
                communityname: "",
                unitname: "",
                unitnum: "",
                unitstatus: "",
                unitcontext: "",
                token: "",
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
                },
                rules: {
                communityname: [
                    { required: true, message: '请输入小区名称', trigger: 'blur' },
                ],
                unitname: [
                    { required: true, message: '请输入单元名称', trigger: 'blur' }
                ],
                unitnum: [
                    {  required: true, message: '请输入栋数', trigger: 'blur' }
                ],
                unitstatus: [
                    {  required: true, message: '请选择状态', trigger: 'change' }
                ],

                
            },
            storepage:{
                u_id: this.$route.query.id,
                communityname: "",
                unitname: "",
                unitnum: "",
                unitstatus: "",
                unitcontext: "",
                token: "",
            },
            detailpage:{
                id: this.$route.query.id,
                token: "",
            }
        }
    },
    created(){
        this.gettoken()
        this.detailmessage()
    },
    methods:{
        //得到token
        gettoken(){
            this.storepage.token = sessionStorage.getItem("token")
            this.detailpage.token = sessionStorage.getItem("token")
        },
        //录入接口
        storemessage(){
            this.storepage.communityname = this.ruleForm.communityname
            this.storepage.unitname = this.ruleForm.unitname
            this.storepage.unitnum = this.ruleForm.unitnum
            this.storepage.unitstatus = this.ruleForm.unitstatus
            if(this.storepage.u_id == null){
                this.$axios.post("http://community.byesame.com/house/addunitList",this.storepage).then((res)=>{
                console.log(res.data)
                this.$message({
                    type: 'success',
                    message: '录入成功!'
                });
                this.$router.push("/house/unit")
            })
            }
            else{
                this.$axios.post("http://community.byesame.com/house/updateunitList",this.storepage).then((res)=>{
                console.log(res.data)
                this.$router.push("/house/unit")
            })
            }
        },
        //返回
        tobefore(){
            this.$router.push("/house/unit")
        },
        //录入
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                this.$confirm('确定提交信息?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                }).then(() => {
                
                this.storemessage()
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消提交'
                });          
                });
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        //详细页得到数据
        detailmessage(){
            if(this.$route.query.flag==2){
                this.$axios.get("http://community.byesame.com/house/getDetailId",{params:this.detailpage}).then((res)=>{
                this.ruleForm.communityname = res.data[0].communityname
                this.ruleForm.unitname= res.data[0].unitname
                this.ruleForm.unitnum = res.data[0].unitnum
                this.ruleForm.unitstatus = res.data[0].unitnum
                this.ruleForm.unitcontext = res.data[0].unitcontext
                console.log("第二页")
            })
            }
            
        },
        //前往编辑
        towrite(){
            this.flag = 1
            this.storepage.unitcontext = this.ruleForm.unitcontext
        },
    }

}
</script>

<style scoped lang="scss">
.main{
    position: relative;
}

.span1{
    display: flex;
    align-items: center
}
.button-box{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100px;
    justify-content: space-between;
    position: absolute;
    right: 0px;
    top: 80px;
}
.el-button+.el-button{
    margin: 0;
}
.el-form--inline .el-form-item {
    width: 50%;
    box-sizing: border-box;
    margin: 0;
    margin-bottom: 20px;
}
.demo-ruleForm{
    display: flex;
    flex-wrap: wrap;
}
.el-input{
    width: 500px;
}
.el-form-item{
    width: 500px;
}


.editor{
    height: 500px;
    width: 100%;
}
.el-form-item{
    width: 92%;
}
.list{
    display: flex;
    line-height: 50px;
    width: 100%;
}
.list-title{
    flex: 1;
    display: flex;
    justify-content: flex-end;
    padding-right: 10px;
}
.list-content{
    flex: 8;
}
</style>